<template>
  <div class="detailMain">
    <a-row>
      <a-col :lg="10" :xl="8" :xxl="6">
        <div class="top-btns">
          <a-button
            type="primary"
            v-if="isCanOnline"
            @click="confirmHint('', 3)"
          >
            保存
          </a-button>
          <a-button
            type="primary"
            v-if="isCanOnline"
            @click="confirmHint('', 4)"
          >
            上架
          </a-button>
          <a-button type="primary" @click="backList">返回</a-button>
        </div>
      </a-col>
      <a-col class="download-btn">
        <div class="top-btns">
          <a-button type="primary" @click="download($event, 0)" icon="download" :loading="iconLoading0">下载图片</a-button>
        </div>
      </a-col>
    </a-row>
    <a-collapse v-model="activeKey">
      <a-collapse-panel header="基础信息" key="0">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商户分类：</p>
            <p>{{detailData.category_name + '/' + detailData.tag_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*门店定位：</p>
            <p>{{detailData.location}}</p>
          </a-col>
          <a-col :span="8">
            <p>*所属区域：</p>
            <p>{{detailData.province_name + ' ' + detailData.city_name + ' ' + detailData.district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*详细地址：</p>
            <p>{{detailData.address_detail}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="推荐人信息" key="1">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*推荐人姓名：</p>
            <p>{{detailData.partner_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*推荐人手机号：</p>
            <p>{{detailData.partner_phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="营业信息" key="2">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*营业时间：</p>
            <p>{{detailData.business_start + '--' + detailData.business_end}}</p>
          </a-col>
          <a-col :span="8">
            <p>*人均消费：</p>
            <p>{{detailData.per_consume}}</p>
          </a-col>
          <a-col :span="8">
            <p>*客服电话：</p>
            <p>{{detailData.service_phone}}</p>
          </a-col>
          <a-col :span="8">
            <p>*发行额度：</p>
            <p>{{detailData.amount}}</p>
          </a-col>
          <a-col :span="8">
            <p>*折扣：</p>
            <p>{{detailData.discount}}</p>
          </a-col>
          <!-- <a-col :span="8">
            <p>*是否打造网红：</p>
            <p>{{detailData.is_red === "true" ? '是' : '否'}}</p>
          </a-col> -->
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="法人信息" key="3">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*法人姓名：</p>
            <p>{{detailData.law_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*身份证：</p>
            <p>{{detailData.law_idno}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="营业执照信息（执照文字需清晰可见且完整，且与名称、类型保持一致）" key="4">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>*执照名称：</p>
            <p>{{detailData.store_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>*营业执照：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="license" alt @click="showImg(license)">
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="经营许可证(选填,许可证文字需清晰可见且完整)" key="5">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>经营许可证：</p>
            <ul class="pic-show alone-pic">
              <li>
                <img :src="licensePremit" alt @click="showImg(licensePremit)">
              </li>
            </ul>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="结算信息" key="6">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*账号类型：</p>
            <p>{{bankType}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行：</p>
            <p>{{detailData.bankname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*银行账号：</p>
            <p>{{detailData.bankcard}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户银行支行：</p>
            <p>{{detailData.branchname}}</p>
          </a-col>
          <a-col :span="8">
            <p>*开户地区：</p>
            <p>{{detailData.bank_province_name + detailData.bank_city_name + detailData.bank_district_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*会员账号：</p>
            <p>{{detailData.member_account}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="费率信息" key="7">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*行业类别：</p>
            <p>{{detailData.industry_pid_name + '/' + detailData.industry_name}}</p>
          </a-col>
          <a-col :span="8">
            <p>*商户结算费率：</p>
            <p>{{detailData.settle_rate}}</p>
          </a-col>
          <a-col :span="8">
            <p>*服务商分润费率：</p>
            <p>{{detailData.commission_rate_pa}}</p>
          </a-col>
          <a-col :span="8">
            <p>*产品交易手续费：</p>
            <p>{{detailData.trade_rate}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="注册信息" key="8">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*手机号码：</p>
            <p>{{detailData.phone}}</p>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="门头信息(商家简称需要与门头照片一致)" key="9">
        <a-row :gutter="16">
          <a-col :span="8">
            <p>*商家简称：</p>
            <p>{{detailData.merchant_name}}</p>
          </a-col>
          <a-col :span="24">
            <p>*门头照片：</p>
            <a-form-item label>
              <a-upload
                name="avatar"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                @change="handleChangeHeadimg"
              >
                <img class="min-pic" v-if="headImg" :src="headImg" alt>
                <div v-else>
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="*店铺主图" key="10">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>*店铺主图：</p>
            <a-form-item label>
              <a-upload
                name="avatar"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                @change="handleChangeCover"
              >
                <img class="min-pic" v-if="cover" :src="cover" alt>
                <div v-else>
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
      <a-collapse-panel header="*店铺详情图" key="11">
        <a-row :gutter="16">
          <a-col :span="24">
            <p>*店铺详情图：</p>
            <a-form-item label>
              <a-upload
                name="avatar"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                @change="handleChangeIntro"
              >
                <img class="min-pic" v-if="intro" :src="intro" alt>
                <div v-else>
                  <a-icon type="plus"/>
                  <div class="ant-upload-text">上传图片</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-collapse-panel>
    </a-collapse>
    <div class="full-screen-wrap" v-show="isShowImg" @click="isShowImg=false">
      <div class="code-img store-img" id="storeImg"></div>
    </div>
    <div class="modal-wrap">
      <confirm-modal :hint="hint" @handleConfirm="handleConfirmOk" ref="openModal"/>
    </div>
    <back-top />
  </div>
</template>

<script>
import { onlineShow, uploadImg, online, downloadImage } from '../../store/providerApi.js'

export default {
  name: 'ProviderCashWithdrawalDetail',
  data() {
    return {
      activeKey: [
        '0',
        '1',
        '2',
        '3',
        '4',
        '5',
        '6',
        '7',
        '8',
        '9',
        '10',
        '11'
      ],
      isShowImg: false,
      detailData: {},
      visible: false,
      maskClosable: false,
      remarkTxt: '',
      auditTitle: '0',
      hint: '',
      isCanOnline: true,
      iconLoading0: false,
      cover: '', // 店铺主图
      intro: '',
      headImg: '', // 门头照片
      license: '', // 营业执照
      licensePremit: '', // 经营许可证
      storePic: [], // 店内照片
      pricePic: [], // 价格表照片
      productPic: [] // 产品照片
    }
  },
  mounted() {
    this.getData()
  },
  computed: {
    bankType () {
      if (this.detailData.bank_type == 0) {
        return ''
      } else if (this.detailData.bank_type == 1) {
        return '对公账户'
      } else if (this.detailData.bank_type == 2) {
        return '私人账户'
      }
    }
  },
  methods: {
    // 返回
    backList() {
      this.$router.go(-1)
    },
    // 获取详情数据
    getData() {
      onlineShow({
        id: this.$route.query.id
      }).then(res => {
        this.detailData = res.data
        this.uuid = res.data.uuid;
        this.license = res.data.license
        this.licensePremit = res.data.license_premit
        this.cover = res.data.cover
        this.intro = res.data.intro
        this.headImg = res.data.head_img
        // this.isAllComputed = res.data.can_verify
        if (res.data.status===4) {
          this.isCanOnline = false
        }
      })
    },
    // 放大图片查看
    showImg(img) {
      this.isShowImg = true
      document.getElementById("storeImg").innerHTML = `<img src="${img}">`
    },
    // 图片上传
    handleChangeCover({ fileList }) {
      // this.loading = true
      let { originFileObj } = fileList[fileList.length - 1]
      this.fileList = fileList
      let formData = new FormData()
      formData.append("image", originFileObj)
      uploadImg(formData).then(res => {
        this.cover = res.data.url
      })
    },
    handleChangeIntro({ fileList }) {
      // this.loading = true
      let { originFileObj } = fileList[fileList.length - 1]
      this.fileList = fileList
      let formData = new FormData()
      formData.append("image", originFileObj)
      uploadImg(formData).then(res => {
        this.intro = res.data.url
      })
    },
    handleChangeHeadimg({ fileList }) {
      // this.loading = true
      let { originFileObj } = fileList[fileList.length - 1]
      this.fileList = fileList
      let formData = new FormData()
      formData.append("image", originFileObj)
      uploadImg(formData).then(res => {
        this.headImg = res.data.url
      })
    },
    // save (status) {
    //   this.putaway(status)
    // },
    // online (status) {
    //   this.putaway(status)
    // },
    // // 上架/保存
    // putaway (status) {
    //   online({
    //     id: this.$route.query.id,
    //     status: status,
    //     head_img: this.headImg,
    //     main_img: this.cover,
    //     intro: this.intro
    //   }).then(res => {
    //     console.log(res)
    //   })
    // },
    confirmHint (item, type) {
      this.type = type
      if (type === 3) {
        this.hint = 5
      } else if (type === 4) {
        this.hint = 8
      }
      this.$refs.openModal.openModal()
    },
    handleConfirmOk (type) {
      online({
        id: this.$route.query.id,
        status: this.type,
        head_img: this.headImg,
        main_img: this.cover,
        intro: this.intro
      }).then(res => {
        this.$message.success(res.data.message)
        this.$router.push('/menu/provider/inviteMerchantShelvesList')
      })
    },
    // 下载图片
    download(event,type) {
      this[`iconLoading${type}`] = true
      event.stopPropagation()
      downloadImage({
        id: this.uuid,
        type
      }).then(res => {
        if (!res.error) {
          window.location.href = res.data.url
        }
        this[`iconLoading${type}`] = false
      }).catch(e => {
        this[`iconLoading${type}`] = false
      })
    },
  }
}
</script>

<style scoped>
/* p {
  margin-left: 18%;
} */
</style>
